<template>
    <div>
        <div style="position: fixed;top: 0;padding: 10px;width: 100%;    background: #2843b9;    display: flex;
        align-items: center;color: #ffffff">
            <el-row style="width: 100%;font-size: 16px;">
                <el-col :span="10">
                    <a href="javascript:history.go(-1);"
                       style="text-decoration: none;color: #ffffff;display: flex;align-items: center;font-size: 16px;font-weight: bold;">
                        <svg t="1733464964236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4265" width="20" height="20"><path d="M729.972918 903.68375l-393.880789-391.691937 393.880789-391.68068c10.270924-10.214642 11.294231-25.719778 2.334161-34.666544-9.002025-8.925277-24.607444-7.902994-34.877345 2.322905L291.499515 491.617787c-5.846148 5.824659-8.601912 13.382798-8.270361 20.463054-0.267083 7.03523 2.468215 14.525831 8.314363 20.306488l405.885194 403.662573c10.269901 10.180873 25.919323 11.248182 34.877345 2.312672C741.267149 929.423995 740.243843 913.908626 729.972918 903.68375z" fill="#ffffff" p-id="4266"></path></svg>
                        返回
                    </a>
                </el-col>
                <el-col :span="14">
                    <div>完善信息</div>
                </el-col>
            </el-row>
        </div>
        <el-card style="margin: 75px 20px;">
            <el-form :model="sizeForm" ref="formRef"
                     :rules="state.rules" >
                <el-form-item prop="avatar" :label-width="0" style="    margin: 0 auto;
    text-align: center;">
                        <Upload class="avatar-upload" v-model="sizeForm.avatar" :attr="{
                            type:'image',
                            showFileList:false
                        }">
                            <template #default>
                                <div class="block" style="text-align: center;margin: 0 auto;">
                                    <el-avatar :size="80" :src="fullUrl(sizeForm.avatar)"/>
                                    <el-icon style="position: relative;left: -30px;top: -10px;"><EditPen /></el-icon>
                                </div>
                            </template>
                        </Upload>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="sizeForm.nickname" class="baseinfo-input"  placeholder="请输入昵称"/>
                </el-form-item>
            </el-form>
            <div class="fixed-footer">
                <el-button type="primary" round style="width: 75%;height: 50px;background: #2843b9;" @click="onSubmit(formRef)">
                    保存
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {ComponentSize, FormInstance, FormProps} from 'element-plus'
import { getProfile, postProfile, postVerification, postChangeBind } from '~/api/user/index'
import{EditPen} from '@element-plus/icons-vue'
import Upload from "~/components/baInput/upload.vue";
const size = ref<ComponentSize>('default')
const labelPosition = ref<FormProps['labelPosition']>('top')
const sizeForm = reactive({
    avatar: '',
    nickname: '',
    scene:"baseinfo"
})
const state=reactive({
    formSubmitLoading:false,
    rules: {
        nickname: [buildValidatorData({ name: 'required', title:'昵称' })],
    },
})

const { data } = await getProfile()
if (data.value?.code == 1){
    sizeForm.avatar = data.value?.data.userInfo.avatar
    sizeForm.nickname = data.value?.data.userInfo.nickname
}

const formRef = ref<FormInstance>()
const onSubmit = (formEl: FormInstance | undefined) => {
    console.log(formEl)
    if (!formEl) return
    formEl.validate((valid) => {
        console.log(valid)
        if (valid) {
            state.formSubmitLoading = true
            postProfile(sizeForm).finally(() => {
                state.formSubmitLoading = false
            })
        }
    })
}
</script>

<style scoped>
.baseinfo-show {
    background: #f5f5f5;
    padding: 20px;
    margin: 75px 20px;
    border: 1px solid #eeeeee;
}

.el-radio-group {
    margin-right: 12px;
}
.avatar-upload{
}

:deep(.el-upload--picture-card){
    border-radius: 50%;
    border:none !important;
    background: none !important;
}
.baseinfo-input{
    height: 45px;
    :deep(.el-input__wrapper){
        border-radius: 20px;
    }
}
.fixed-footer {
    position: fixed;
    border: 0;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: #f5f5f5;
    height: 75px;
    align-items: center;
}
</style>
